<template>
  <div class="login" :style="'background-image:url(' + Background + ');'">
    <div class="infoPro">
      <div class="toplogo">
        <!-- <img v-if="logo" :src="logo" style="vertical-align: middle;width: 150px;"> -->
        <!-- <span>贵州华泰智远</span> -->
      </div>
      <div>
        <!--<h3 class="title">数据支撑分系统</h3>-->
        <!--<h3 class="titleInfo">简单、高效，多功能集成管理系统</h3>-->
      </div>
      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="loginRules"
        label-position="left"
        label-width="0"
        class="login-form"
      >
        <p class="logintitle">登录</p>
        <el-form-item prop="username" label="">
          <el-input
            v-model="loginForm.username"
            type="text"
            auto-complete="off"
            placeholder="账号"
          >
            <svg-icon
              slot="prefix"
              icon-class="user"
              class="el-input__icon input-icon"
            />
          </el-input>
        </el-form-item>
        <el-form-item prop="password" label="" style="position: relative;">
            <!-- auto-complete="off" -->
          <el-input
            v-model="loginForm.password"
            :type="userInputType"
            autocomplete="new-password"
            placeholder="密码"
            @keyup.enter.native="handleLogin"
          >
            <svg-icon
              slot="prefix"
              icon-class="password"
              class="el-input__icon input-icon"
            />
          </el-input>
          <svg-icon v-if="userInputType!='text'" @click="showPassword('text')" class="eyes" icon-class="closeeye"/>
          <svg-icon v-else @click="showPassword('password')" class="eyes" icon-class="openeye"/>
        </el-form-item>
        <el-form-item prop="" label="">
          <div style="display: flex; justify-content: space-between">
            <el-input
              v-model="code"
              style="display: inline-block; width: 69%"
              auto-complete="off"
              placeholder="验证码"
              @input="setCode"
              @keyup.enter.native="handleLogin"
            />
            <img
              style="width:30%; height: 38px;border-radius:4px;border: 1px solid #dcdfe6;"
              :src="codePath"
              alt=""
              @click="getCode"
            >
          </div>
        </el-form-item>
        <el-form-item style="width: 100%">
          <el-button
            :loading="loading"
            size="medium"
            type="primary"
            style="width: 100%"
            @click.native.prevent="handleLogin"
          >
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--  底部  -->
    <div v-if="$store.state.settings.showFooter" id="el-login-footer">
      <span v-html="$store.state.settings.footerTxt" />
      <span v-if="$store.state.settings.caseNumber"> ⋅ </span>
      <a target="_blank">{{ $store.state.settings.caseNumber }}</a>
    </div>

    <p class="bq">

      <!-- <a target="_blank" href="https://beian.miit.gov.cn/">黔ICP备17008275号-1</a>  -->
    </p>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import Logo from '@/assets/images/xiaofang.jpg'

import { getImageCode } from '@/api/home_/experiment'
import qs from 'qs'
import Background from '@/assets/images/xiaofang.jpg'
export default {
  name: 'Login',
  data() {
    return {
      userInputType:"password",
      logo: Logo,
      codePath: '',
      codeKey: '',
      Background: Background,
      cookiePass: '',
      param: '',
      code: '',
      loginForm: {
        username:process.env.NODE_ENV === 'production' ? '' : 'wanggui',
        password:process.env.NODE_ENV === 'production' ? '' : 'htzy@2017',
        grant_type: 'password',
        client_id: 'huatai',
        client_secret: 'waytale'
      },
      loginRules: {
        username: [
          { required: true, trigger: 'blur', message: '用户名不能为空' }
        ],
        password: [{ required: true, trigger: 'blur', message: '密码不能为空' }]
      },
      loading: false,
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        const data = route.query
        if (data && data.redirect) {
          this.redirect = data.redirect
          delete data.redirect
          if (JSON.stringify(data) !== '{}') {
            this.redirect =
              this.redirect + '&' + qs.stringify(data, { indices: false })
          }
        }
      },
      immediate: true
    }
  },
  created() {
    this.point()
    this.getCode()
  },
  mounted() {
    this.$nextTick(() => {})
  },
  methods: {
    showPassword(v){
      this.userInputType = v
    },
    setCode() {
      sessionStorage.setItem('userInputCode', this.code)
    },
    getCode() {
      getImageCode().then((res) => {
        this.codePath = res.image
        this.codeKey = res.key
        sessionStorage.setItem('codeKey', res.key)
      })
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        const user = this.loginForm
        if (valid) {
          this.loading = true
          this.$store
            .dispatch('Login', user)
            .then((res) => {
              this.loading = false
              this.$router.push({ path: this.redirect || '/' }) //原来的
            })
            .catch((error) => {
              this.loading = false
              this.getCode()
            })
        } else {
          return false
        }
      })
    },
    point() {
      const point = Cookies.get('point') !== undefined
      if (point) {
        this.$notify({
          title: '提示',
          message: '当前登录状态已过期，请重新登录！',
          type: 'warning',
          duration: 5000
        })
        Cookies.remove('point')
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "~@/assets/styles/variables.scss";
  .eyes{
    position: absolute;
    right: 0;
    font-size:22px;
    margin:8px 5px;
    cursor: pointer;
    color: #999;
  }
.logintitle{
  padding: 10px 0 30px 0;
  text-align: center;
  letter-spacing: 6px;
  font-size: 18px;
  color: #3c3e4b;
}
.login {
  align-items: center;
  height: 100vh;
  overflow: hidden;
  margin:0px;
  background-size:100% 100%;
  background-attachment:fixed;
  .infoPro{
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: space-around;
    .titleInfo,.title,.toplogo{
      padding-left: 150px;
    }
    .toplogo{
      // padding-top:35px;
      padding-bottom: 30px;
    }
    .title {
      font-size: 56px;
      font-weight: bold;
      color: $themColor;
      letter-spacing:10px;
      margin-top:6%;
    }
    .titleInfo{
      color: #8699c4;
      margin-top:4px;
      letter-spacing:5px;
    }
    .login-form {
        background: #fff;
        border-radius: 6px;
        box-shadow: 4px 2px 10px #cfcfcf;
        width: 390px;
        padding: 25px;
        margin:5% 150px 150px 150px;
        bottom: 0;
      .el-input {
        height: 38px;
        input {
          height: 38px;
        }
      }
      .input-icon {
        height: 39px;
        width: 14px;
        margin-left: 2px;
      }
    }
  }

  .bq{
    position: fixed;
    bottom: 20px;
    letter-spacing: 2px;
    color: #040000;
    text-align: center;
    width: 100%;
  }
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.login-code {
  width: 33%;
  display: inline-block;
  height: 38px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
</style>
